
.post-category {
    background-color: #fff;
    padding: 10px 5px; 
    border-radius: 8px;  
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.02);  /* ��ӰЧ�� */
    width: auto;  /* ������������Ӧ���� */
    min-width: 150px;  
    text-align: left;
    height: 5%;  /* �̶��߶� */
    width:20%;
  }
  
  /* ������ʽ */
  .post-category h3 {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 15px;
    color: #333;
    text-align: center;  /* ���Ķ������? */
  }
  
  /* �б�����������Ϊ�������� */
  .post-category-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;  /* ʹ�� flexbox ���� */
    flex-direction: row;  /* �������� */
    justify-content: space-evenly;  /* ��Ŀ֮����ȷֲ�? */
    align-items: center;  /* ��ֱ���� */
    width: 100%;  
  }
  
  /* �б���Ļ������? */
  .post-category-list li {
    font-size: 16px;
    color: #555;  /* Ĭ��������ɫ */
    cursor: pointer;  /* �����ͣʱ��ʾΪ����? */
    transition: background-color 0.3s, color 0.3s, transform 0.2s ease;  /* ƽ������ */
    padding: 8px 16px;  /* �����ʵ����ڱ߾� */
    border-radius: 5px;  /* ����Բ�� */
    display: flex;
    justify-content: center;  /* ˮƽ���� */
    align-items: center;  /* ��ֱ���� */
    text-align: center;
  }
  
  /* ��ͣʱ��Ч�� */
  .post-category-list li:hover {
    background-color: #d9dddfc2;
    border-radius: 5px;
    color: rgba(171, 198, 212, 1);
  }
  
  /* ѡ��������? */
  .post-category-list li.active {
    font-weight: bold;
    border-radius: 5px;
    background-color: rgb(150, 185, 202);
    color: white;
  }
  
  /* ��Ӧʽ��ƣ������ƶ���? */
  @media (max-width: 600px) {
    .post-category {
      left: 5%;  /* ��С��Ļʱ��߾��С */
      width: 90%;  /* �������ӣ���ӦС�� */
    }
  
    .post-category-list {
      flex-direction: column;  /* С��Ļ�ϵ���Ϊ�������� */
      align-items: center;  /* �������� */
    }
  
    .post-category-list li {
      margin-bottom: 10px;  /* �����б����� */
    }
  }
  